<template>
  <AdvancedTable>
    <template #form>
      <a-form class="my-form" layout="inline">
        <a-form-item label="字典值">
          <a-input v-model:value="queryParams.name" placeholder="请输入字典值" />
        </a-form-item>
        <a-form-item label="类型编码">
          <a-input v-model:value="queryParams.code" placeholder="请输入类型编码" />
        </a-form-item>
        <a-form-item>
          <a-button class="mr10" type="primary" @click="query({ pageNo: 1 })">查询</a-button>
          <a-button @click="query({ pageNo: 1, name: '', code: '' })">重置</a-button>
        </a-form-item>
      </a-form>
    </template>
    <template #btns>
      <a-button class="mr10" @click="showDictModel" type="primary">
        <template #icon>
          <PlusCircleOutlined />
        </template>
        新增
      </a-button>
    </template>
    <template #table>
      <div class="data-protal">
        <a-table class="my-table" :loading="loading" :row-key="(record) => record.guid" :row-selection="{
                        selectedRowKeys: selectRowKeys,
                        onChange: selectChange,
                    }" @change="tableChange" :pagination="pagination" :columns="columns" :data-source="tableData">
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key == 'index'">
              <span>{{ index + 1 }}</span>
            </template>
            <template v-if="column.key == 'operation'">
              <a href="#">详情</a>
              <a-divider type="vertical" />
              <a href="#" @click="handleDetele({ code: record.code })">删除</a>
            </template>
          </template>
        </a-table>
      </div>
    </template>
  </AdvancedTable>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { RouteLayout } from '@/layouts'
import { TableFuns } from '@/mixins/tableFuns'
import { PlusCircleOutlined } from '@ant-design/icons-vue'
import AdvancedTable from '@/components/AdvancedTable.vue'
import DictFormModel from './model/dictFormModel.vue'
import CommonApi from '@/api/common'

const FetchApi = {
	queryApi: CommonApi.getDictPage,
	deleteApi: CommonApi.deleteDict
} // 请求接口
const queryParams = reactive({ pageNo: 1, pageSize: 10, typeCode: 1, name: '', code: '' }) // 请求列表参数

// 引入table公共逻辑
const { tableData, loading, pagination, selectRowKeys, query, tableChange, selectChange, handleDetele } = TableFuns({ FetchApi, queryParams })

const columns = [
	{
		title: '序号',
		dataIndex: 'index',
		key: 'index',
		align: 'center'
	},
	{
		title: '字典类型编码',
		align: 'center',
		dataIndex: 'typeCode',
		key: 'typeCode'
	},
	{
		title: '字典编码',
		align: 'center',
		dataIndex: 'code',
		key: 'code'
	},
	{
		title: '字典值',
		align: 'center',
		dataIndex: 'dictName',
		key: 'dictName'
	},
	{
		title: '备注',
		align: 'center',
		dataIndex: 'mark',
		key: 'mark'
	},
	{
		title: '创建时间',
		align: 'center',
		dataIndex: 'createTime',
		key: 'createTime',
		width: 180
	},
	{
		title: '操作',
		align: 'center',
		key: 'operation',
		width: 150
	}
]

// 显示model框
const showDictModel = () => {}
</script>

<style lang="less" scoped>
.data-protal {
}
</style>
 